<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on 事件处理函数参数详解</title>
</head>
<body>
<div id="app">
    <!-- 调用无参函数，函数的() 可以省略 -->
    <button @click="btnClicked">按钮1</button>
    <button @click="btnClicked()">按钮2</button>

    <br>
    <!--  调用有一个参数的函数，只有函数名称，默认会传入事件  -->
    <button @click="buttonClicked">按钮3</button>
    <!--  调用有一个参数的函数， 只有函数名称和(), 不会有内容作为参数传入-->
    <button @click="buttonClicked()">按钮4</button>
    <!--  调用有一个参数的函数， 传入对应个数的参数，使用传入的值-->
    <button @click="buttonClicked(123)">按钮5</button>
    <!--  传入事件  -->
    <button @click="buttonClicked($event)">按钮6</button>

    <br>
    <!--  调用有多个参数的函数，只有函数名称，默认讲事件作为第一个参数，其他参数为未定义  -->
    <button @click="clicked">按钮7</button>
    <!--  调用有多个参数的函数，只有函数名称和()，所有参数为未定义  -->
    <button @click="clicked()">按钮8</button>
    <!--  调用有多个参数的函数，实际传入的参数格式小于定义的参数格式，对应位置的传值，其他的参数未定义  -->
    <button @click="clicked(123)">按钮9</button>
    <button @click="clicked(123,456)">按钮10</button>

</div>
<script src="../../../../../js/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {}
        },
        methods: {
            btnClicked() {
                console.log("点击了按钮");
            },
            buttonClicked(param) {
                console.log(param);
            },
            clicked(param1, param2) {
                console.log(param1);
                console.log(param2);
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>